<template>
  <div class="permission">
      <zh-card title="查询条件（维护位置-首页右侧：场景评价）">
          <a-form :form="queryParam" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
            <a-row :span="24">
              <a-col :span="8">
                <a-form-item label="场景名称">
                  <a-input v-model="queryParam.k0402"/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row style="display: flex; justify-content: flex-end; ">
              <ep-button :size="size" icon="search.svg" @click="()=>{this.getList();}"> 查询</ep-button>
              <ep-button
                  style="margin-left: 15px"
                  :size="size"
                  icon="add.svg"
                  @click="
            () => {
              this.addProject();
            }
          "
              >新增
              </ep-button>
              <ep-button
                  :size="size"
                  style="margin-left: 15px"
                  type="danger"
                  icon="del.svg"
                  @click="() => {this.deleteProject();}"
              >删除</ep-button>
            </a-row>
          </a-form>
      </zh-card>
    <a-modal
        centered
        style="top: 20px"
        width="75%"
        destroyOnClose
        v-model="visible"
        cancelText="关闭"
        okText="保存"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <ZztsCjxxXgForm ref="zztsCjxXgRef" @handleCancel="handleCancel"></ZztsCjxxXgForm>
      <template slot="footer">
        <ep-button @click="handleCancel">取消</ep-button>
        <ep-button @click="handleOk" type="save">保存</ep-button>
      </template>
    </a-modal>

    <div class="ep-table">
      <zh-table
          ref="tableList"
          style="width: 100%"
          :data="tableData"
          height="auto"
          rowId="roleId"
          type="paging"
          :columns="tableColumn"
          @checkbox-change="selectChangeEvent"
          @checkbox-all="selectAllEvent"
      >
        <template #filter="{ $panel, column }">
          <input
              type="type"
              v-for="(option, index) in column.filters"
              :key="index"
              v-model="option.data"
              @input="$panel.changeOption($event, true, option)"
          />
        </template>
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content">
              <ep-button @click="showDetail(row)"> 查看</ep-button>
              <ep-button style="margin-left: 5px" @click="editDetail(row)"> 编辑</ep-button>
            </span>
          </div>
        </template>
      </zh-table>
    </div>
  </div>
</template>

<script>
import modal from "ant-design-vue/es/modal";
import {
  getZttsCjxxXgList,deleteZztsZyqlXg,deleteZttsCjxxXg,getStatus
} from "@/services/system/whdngxlApi";
import ZhTable from "@/components/zh-table/ZhTable";
import {mapGetters} from "vuex";
import ZztsCjxxXgForm  from "@/pages/whdn/bigScreenDataManager/zttsCjxxXg/form/ZttsCjxxXgForm";
import EpButton from "@/components/assembly/button";
export default {
  name: "ZttsCjxxXg",
  computed: {
    ...mapGetters(['size']),
  },
  components: {
    EpButton,
    ZztsCjxxXgForm,
    ZhTable,
  },
  data() {
    return {
      tableUrl: getZttsCjxxXgList,
      dictData: {
        c0303: [],
        c0306: [],
      },
      filtersData: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      // 分页参数
      tablePage: {
        total: 0,
        currentPage: 1,
        pageNum: 1,
        pageSize: 200,
      },
      taskAreaTree: [],
      tableColumn: [
        { type: "checkbox", width: 50, fixed: "left", visible: true },
        {type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号',visible: true},
        {
          field: "id",
          title: "场景评价id",
          visible: false,
          align: "center",
          width: 150,
        },
        {
          field: "k0402",
          title: "场景名称",
          align: "center",
          minWidth: 120,
          visible: true,
        },
        {
          field: "k0403",
          title: "建设进度",
          align: "center",
          minWidth: 120,
          visible: true,
        },
        {
          field: "k0404",
          title: "巡查数",
          align: "center",
          minWidth: 120,
          visible: true,
        },
        {
          field: "k0405",
          title: "访问量",
          align: "center",
          minWidth: 120,
          visible: true,
        },
        {
          field: "operate",
          title: "操作",
          fixed: "right",
          align: "center",
          minWidth: 150,
          slots: {
            // 使用插槽模板渲染
            default: "operate",
          },
          visible: true,
        },
      ],
      tableData: [],
      visible: false,
      //表头
      toolbarConfig: {
        custom: true,
        slots: {},
      },
      loading: false,
      selectedRowKeys: [] /*table选中keys*/,
      selectionRows: [] /*table选中records*/,
      checkedFlag:false,
      queryParam: {
        k0402:''
      },
    };
  },
  mounted() {},
  created() {
    // 数据初始化
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    getList(){
      const params = {};
      params.k0402=this.queryParam.k0402;
      this.loading = true;
      this.$http
          .post(this.tableUrl, params)
          .then((res) => {
            this.loading = false;
            const data = res.result;
            this.tableData = data.list || [];
          })
          .catch((err) => {
            this.loading = false;
          });
    },
    updateFilters() {
      if (!this.tableData || this.tableData.length === 0) {
        this.zb1Filters = [];
        this.zb2Filters = [];
        this.areaFilters = [];
        return;
      }
      const zb1Set = new Set();
      const zb2Set = new Set();
      const areaSet = new Set();
      this.tableData.forEach(item => {
        if (item.zb1 != null && item.zb1 !== '') {
          zb1Set.add(String(item.zb1));
        }
        if (item.zb2 != null && item.zb2 !== '') {
          zb2Set.add(String(item.zb2));
        }
        if (item.orgName != null && item.orgName !== '') {
          areaSet.add(String(item.orgName));
        }
      });
      this.zb1Filters = [];
      this.zb2Filters = [];
      this.areaFilters = [];
      this.$nextTick(() => {
        this.zb1Filters = Array.from(zb1Set).map(value => ({ label: value, value }));
        this.zb2Filters = Array.from(zb2Set).map(value => ({ label: value, value }));
        this.areaFilters = Array.from(areaSet).map(value => ({ label: value, value }));
      });
    },
    onChange(checked){
      let str="";
      if ( checked){
        str="开启";
      }else{
        str="关闭";
      }
      this.checkedFlag=checked
      this.$http.post(updateStatus, {checkedFlag: this.checkedFlag}).then((res) => {
        if (res.code === 0)
            this.$message.info(str+"成功");
          })
          .catch((error) => {
          })
    },
    init() {
      this.listQuery();
    },
    handleOk() {
      this.$nextTick(() => {
        this.$refs.zztsCjxXgRef.saveData();
      });
    },
    handleCancel() {
      this.visible = false;
    },
    showOrHide() {
      this.visible = !this.visible;
    },
    listQuery() {
      //手动清空用户的选择
      this.$refs.tableList.clearCheckboxRow()
      //手动清空用户保留选中的行数据
      this.$refs.tableList.clearCheckboxReserve()
      //删除所选中的数据
      this.$refs.tableList.removeCheckboxRow()
      this.selectionRows = []
      this.selectedRowKeys = []
      this.$refs.tableList.isAllChecked = false
      this.isFirstLoad=false
      this.getList()
    },
    addProject() {
      this.showOrHide();
    },
    deleteProject() {
      if (this.$refs.tableList.isAllChecked) {
        // this.selectionRows=this.$refs.tableList.allData;
        this.selectionRows = this.$refs.tableList.getCheckboxRecords();
      } else {
        this.selectionRows = this.$refs.tableList.getAllCheckboxRecords();
      }
      if (this.selectionRows.length === 0) {
        modal.warn({ title: "提示", content: "请至少选择一条数据" });
        return;
      }
      modal.confirm({
        title: "确认删除该条数据吗？",
        onOk: () => {
          const params = {};
          this.$loading.show("正在处理数据,请等待...");
          params.deleteList = this.selectionRows;
          // eslint-disable-next-line no-debugger
          setTimeout(() => {
            this.$http
                .post(deleteZztsZyqlXg, params)
                .then((res) => {
                  this.$message.info("删除成功");
                  this.init();
                  this.$loading.hide();
                })
                .catch((error) => {
                  console.log(JSON.stringify(error));
                  this.$loading.hide();
                })
                .finally(() => {});
          }, 50);
        },
        onCancel: () => {},
      });
    },
    exportExcel() {},
    importData(){

    },
    flushPage() {
      this.queryParam.zb2 = "";
      this.init();
    },
    //查看详情
    showDetail(row) {
      this.showOrHide();
      this.$nextTick(() => {
        this.$refs.zztsCjxXgRef.initData(row,'view');
      });
    },
    editDetail(row){
      this.showOrHide();
      this.$nextTick(() => {
        this.$refs.zztsCjxXgRef.initData(row,'edit');
      });
    },
    columnChange() {
      this.$refs.tableList.refreshColumn();
    },
    filterZb1Method({ option, row }) {
      return row.zb1.includes(option.data);
    },
    filterZb2Method({ option, row }) {
      return row.zb2.includes(option.data);
    },
    filterOrgNameMethod({ option, row }) {
      return row.orgName.includes(option.data);
    },
    //复选框事件(保留翻页选中的数据)
    selectChangeEvent({ checked, records, reserves, row }) {
      // console.log(checked ? '勾选事件' : '取消事件')
      // console.log('当前选中的数据：' + records)
      // console.log('翻页时其他页的数据：' + reserves)
      // console.log('当前选中的数据行：' + row )
      //勾选选中时
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0) {
          this.selectedRowKeys = records.map((v) => v.id);
          this.selectionRows = records;
        } else {
          //aac147集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectedRowKeys = [
            ...reserves.map((v) => v.id),
            ...records.map((v) => v.id),
          ];
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves, ...records];
        }
      } else {
        //取消选中时
        let aac147Index = this.selectedRowKeys.indexOf(row.id);
        if (aac147Index > -1) {
          //删除取消选中删除指定元素aac147
          this.$delete(this.selectedRowKeys, aac147Index);
        }

        let dataIndex = null;
        for (let i = 0; i < this.selectionRows.length; i++) {
          if (this.selectionRows[i].id == row.id) {
            dataIndex = i;
            break;
          }
        }
        //删除取消选中的元素整个对象
        this.$delete(this.selectionRows, dataIndex);
      }
    },
    //vxe复选框当前页全选中方法(保留翻页选中的数据)：
    selectAllEvent({ checked, records, reserves }) {
      // console.log(checked ? '勾选事件' : '取消事件')
      // console.log('当前选中的数据：' + records)
      // console.log('翻页时其他页的数据：' + reserves)
      //全选中时
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0) {
          this.selectedRowKeys = records.map((v) => v.aac147);
          this.selectionRows = records;
        } else {
          //aac147集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectedRowKeys = [
            ...reserves.map((v) => v.aac147),
            ...records.map((v) => v.aac147),
          ];
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves, ...records];
        }
      } else {
        //取消全选时,直接将翻页数据赋值，当前页数据不用加上
        this.selectionRows = reserves;
        this.selectedRowKeys = reserves.map((v) => v.aac147);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.permission {
  //padding: 15px 20px 0;
  height: 100%;

  //.desc,
  //.operate {
  //  display: flex;
  //  align-items: center;
  //  justify-content: space-between;
  //  color: #fff;
  //
  //  > div {
  //    flex: 0 0 auto;
  //    display: flex;
  //    align-items: center;
  //  }
  //}
  //
  //.desc {
  //  margin-bottom: 20px;
  //}

  //.operate {
  //  margin-bottom: 15px;
  //  .field {
  //    flex: 0 0 auto;
  //    position: relative;
  //    margin-left: 15px;
  //    .field-box {
  //      position: absolute;
  //      top: 40px;
  //      left: 0;
  //      right: -40px;
  //      z-index: 99;
  //      border: 1px solid #2175a9;
  //      background: #002a44;
  //      border-radius: 5px;
  //      ul {
  //        padding: 10px;
  //        li {
  //          padding: 1px 0;
  //        }
  //      }
  //      .btn {
  //        display: flex;
  //        align-items: center;
  //        justify-content: space-between;
  //        padding: 5px;
  //        border-top: 1px solid #2175a9;
  //        color: #fff;
  //        p {
  //          flex: 1;
  //          text-align: center;
  //          cursor: pointer;
  //          &:hover {
  //            color: #49bbeb;
  //          }
  //        }
  //      }
  //    }
  //  }
  //}
  .ep-table {
    height: calc(100% - 100px);
  }
}

</style>
